<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="数据场：">
                  <UserSearchable v-model="from.dataFactoryId" :type="'datafieldList'">
                    <template #dropdownTitle>
                      <span>数据场</span>

                    </template>
                    <template v-slot:dropdown="{ item }">
                      <span>{{ item.name }}</span>
                    </template>
                  </UserSearchable>
                  <!-- <el-select
                    v-model="from.dataFactoryId"
                    placeholder="请选择"
                    class="selWidth"
                    clearable
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> -->
                </el-form-item>
                <el-form-item label="开始时间：">
                  <el-date-picker v-model="from.beginTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" class="selWidth" clearable>
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间：">
                  <el-date-picker v-model="from.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" class="selWidth" clearable>
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button class="mr10" size="small" type="primary" @click="search()" icon="el-icon-search">搜索</el-button>
                  <el-button class="mr10" size="small" @click="reset()" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <div class="list">
            <el-row :gutter="24" class="dashboard-console-grid">
              
              <!-- <el-col v-bind="grid" class="ivu-mb">
                <el-card :bordered="false">
                  <p class="p1">额度</p>
                  <p class="p2">{{ lines || 0 }}</p>
                </el-card>
              </el-col> -->
              <el-col v-bind="grid" class="ivu-mb">
                <el-card :bordered="false">
                  <p class="p1">总平仓结果</p>
                  <p class="p2">{{ exit || 0 }}</p>
                </el-card>
              </el-col>
              <el-col v-bind="grid" class="ivu-mb">
                <el-card :bordered="false">
                  <p class="p1">总平仓盈利</p>
                  <p class="p2">{{ exitProfit || 0 }}</p>
                </el-card>
              </el-col>
              <el-col v-bind="grid" class="ivu-mb">
                <el-card :bordered="false">
                  <p class="p1">总平仓亏损</p>
                  <p class="p2">{{ exitLoss || 0 }}</p>
                </el-card>
              </el-col>
              <el-col v-bind="grid" class="ivu-mb">
                <el-card :bordered="false">
                  <p class="p1">总交易手数</p>
                  <p class="p2">{{ volumeSum || 0 }}</p>
                </el-card>
              </el-col>
              <el-col v-bind="grid" class="ivu-mb">
                <el-card :bordered="false">
                  <p class="p1">周期</p>
                  <p class="p2">{{ cycle || 0 }}</p>
                </el-card>
              </el-col>
              <el-col v-bind="grid" class="ivu-mb">
                <el-card :bordered="false">
                  <p class="p1">总服务费</p>
                  <p class="p2">{{ feeSum || 0 }}</p>
                </el-card>
              </el-col>
              <el-col v-bind="grid" class="ivu-mb">
                <el-card :bordered="false">
                  <p class="p1">净盈亏</p>
                  <p class="p2">{{ profitAndLoss || 0 }}</p>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="btn_bt">
          <el-tabs v-model="active" type="card" @tab-click="handleClick">
            <el-tab-pane label="总平仓结果" name="exitImage">
              <div v-if="active == 'exitImage'" id="exitImage" style="width: 100%; height: 400px"></div>
            </el-tab-pane>
            <el-tab-pane label="总平仓盈利" name="exitProfitImage">
              <div v-if="active == 'exitProfitImage'" id="exitProfitImage" style="width: 100%; height: 400px"></div>
            </el-tab-pane>
            <el-tab-pane label="总平仓亏损" name="exitLossImage">
              <div v-if="active == 'exitLossImage'" id="exitLossImage" style="width: 100%; height: 400px"></div>
            </el-tab-pane>
            <el-tab-pane label="总交易手数" name="volumeSumImage">
              <div v-if="active == 'volumeSumImage'" id="volumeSumImage" style="width: 100%; height: 400px"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data"  style="width: 100%" size="mini"
        highlight-current-row>
        <el-table-column prop="dataFactoryName" label="数据场" min-width="100" />
        <el-table-column prop="lines" label="额度留存" min-width="100">
          <template slot-scope="scope">
            {{
              parseFloat(`${scope.row.lines}`)
                .toFixed(2)
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
            }}
            </template>
        </el-table-column>
        <el-table-column prop="exit" label="总平仓结果" min-width="100" />
        <el-table-column prop="volumeSum" label="总交易数" min-width="100" />
        <el-table-column prop="feeSum" label="总服务费" min-width="100" />
        <el-table-column prop="profitVolumeSum" label="	盈利手数" min-width="100" />
        <el-table-column prop="lossVolumeSum" label="亏损手数" min-width="100" />
        <el-table-column prop="winRate" label="	胜率" min-width="100">
          <template slot-scope="scope">
            <!-- 使用number精度不准确！ -->
            <!-- <span>{{ Number(scope.row.winRate) * 100 }}%</span> -->
            <span>{{ Math.floor(scope.row.winRate * 100) }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="profitSum" label="	总盈利" min-width="100" />
        <el-table-column prop="lossSum" label="总亏损" min-width="100" />
        <el-table-column prop="profitMax" label="最大盈利" min-width="100" />
        <el-table-column prop="lossMax" label="最大亏损" min-width="100" />
        <el-table-column prop="profitAverage" label="平均盈利" min-width="100" />
        <el-table-column prop="lossAverage" label="平均亏损" min-width="100" />
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
  </div>
</template>

<script>
import echarts from "echarts";
import {
  datafieldGetOption,
  indexIndexList,
  indexCommodityList,
} from "@/api/dataField";
import UserSearchable from "@/components/UserSearchable";
export default {
  components: {
    UserSearchable,
  },
  name: "Dashboard",
  data() {
    return {
      labelPosition: "right",
      options: [],
      from: {
        dataFactoryId: "",
        beginTime: "",
        endTime: "",
        page: 1,
        limit: 15,
      },
      grid: {
        xl: 3,
        lg: 3,
        md: 6,
        sm: 8,
        xs: 8,
      },
      active: "exitImage",
      lines: "", //额度
      exit: "", //	总平仓结果
      exitImage: {}, // 总平仓结果图
      exitProfit: "", // 总平仓盈利
      exitProfitImage: {}, // 总平仓盈利图
      exitLoss: "", // 总平仓亏损
      exitLossImage: {}, // 总平仓亏损图
      volumeSum: "", // 总交易手数
      volumeSumImage: {}, // 总交易手数图
      cycle: "", // 周期
      feeSum: "", // 总服务费
      profitAndLoss: "", // 净盈亏
      loading: false,
      tableData: {
        data: [],
        total: 0,
      },
    };
  },
  mounted() {
    // console.log(888888)
    datafieldGetOption({})
      .then((res) => {
        console.log("数据场全列表8888", res);
        // console.log(8888889999999999999999)
        this.options = res;
      })
      .catch((err) => {
        console.log(err);
      });

    this.getIndexList();
    this.getCommodityList();
  },
  methods: {
    search() {
      console.log(this.from);
      this.from.page = 1;
      this.from.limit = 15;
      this.getIndexList();
      this.getCommodityList();
    },
    reset() {
      this.from = {
        dataFactoryId: "",
        beginTime: "",
        endTime: "",
        page: 1,
        limit: 15,
      };
      this.getIndexList();
      this.getCommodityList();
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.getIndexList();
    },
    getIndexList() {
      let data = {
        dataFactoryId: this.from.dataFactoryId,
        beginTime: this.from.beginTime,
        endTime: this.from.endTime,
      };
      indexIndexList(data)
        .then((res) => {
          console.log("图形化统计", res);
          this.exit = res.exit; //	总平仓结果
          this.lines = res.lines; //	额度
          this.exitImage = res.exitImage; // 总平仓结果图
          this.exitProfit = res.exitProfit; // 总平仓盈利
          this.exitProfitImage = res.exitProfitImage; // 总平仓盈利图
          this.exitLoss = res.exitLoss; // 总平仓亏损
          this.exitLossImage = res.exitLossImage; // 总平仓亏损图
          this.volumeSum = res.volumeSum; // 总交易手数
          this.volumeSumImage = res.volumeSumImage; // 总交易手数图
          this.cycle = res.cycle; // 周期
          this.feeSum = res.feeSum; // 总服务费
          this.profitAndLoss = res.profitAndLoss; // 	净盈亏
          if (this.active == "exitImage") {
            let exitImageChart = echarts.init(
              document.getElementById("exitImage")
            );
            let exitImageoption = {
              title: {
                text: "总平仓结果图",
              },
              tooltip: {
                trigger: "axis",
              },
              legend: {
                data: ["当日数据", "累计数据"],
              },
              grid: {
                left: "2%",
                right: "2%",
                bottom: "2%",
                containLabel: true,
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: this.exitImage.timeline,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  name: "当日数据",
                  type: "line",
                  stack: "Total",
                  data: this.exitImage.dataDay,
                },
                {
                  name: "累计数据",
                  type: "line",
                  stack: "Total",
                  data: this.exitImage.dataSum,
                },
              ],
            };
            exitImageChart.setOption(exitImageoption);
          } else if (this.active == "exitProfitImage") {
            let exitProfitImageChart = echarts.init(
              document.getElementById("exitProfitImage")
            );
            let exitProfitImageoption = {
              title: {
                text: "总平仓盈利图",
              },
              tooltip: {
                trigger: "axis",
              },
              legend: {
                data: ["当日数据", "累计数据"],
              },
              grid: {
                left: "2%",
                right: "2%",
                bottom: "2%",
                containLabel: true,
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: this.exitProfitImage.timeline,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  name: "当日数据",
                  type: "line",
                  stack: "Total",
                  data: this.exitProfitImage.dataDay,
                },
                {
                  name: "累计数据",
                  type: "line",
                  stack: "Total",
                  data: this.exitProfitImage.dataSum,
                },
              ],
            };
            exitProfitImageChart.setOption(exitProfitImageoption);
          } else if (this.active == "exitLossImage") {
            let exitLossImageChart = echarts.init(
              document.getElementById("exitLossImage")
            );
            let exitLossImageoption = {
              title: {
                text: "总平仓亏损图",
              },
              tooltip: {
                trigger: "axis",
              },
              legend: {
                data: ["当日数据", "累计数据"],
              },
              grid: {
                left: "2%",
                right: "2%",
                bottom: "2%",
                containLabel: true,
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: this.exitLossImage.timeline,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  name: "当日数据",
                  type: "line",
                  stack: "Total",
                  data: this.exitLossImage.dataDay,
                },
                {
                  name: "累计数据",
                  type: "line",
                  stack: "Total",
                  data: this.exitLossImage.dataSum,
                },
              ],
            };
            exitLossImageChart.setOption(exitLossImageoption);
          } else if (this.active == "volumeSumImage") {
            let volumeSumImageChart = echarts.init(
              document.getElementById("volumeSumImage")
            );
            let volumeSumImageoption = {
              title: {
                text: "总交易手数图",
              },
              tooltip: {
                trigger: "axis",
              },
              legend: {
                data: ["当日数据", "累计数据"],
              },
              grid: {
                left: "2%",
                right: "2%",
                bottom: "2%",
                containLabel: true,
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: this.volumeSumImage.timeline,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  name: "当日数据",
                  type: "line",
                  stack: "Total",
                  data: this.volumeSumImage.dataDay,
                },
                {
                  name: "累计数据",
                  type: "line",
                  stack: "Total",
                  data: this.volumeSumImage.dataSum,
                },
              ],
            };
            volumeSumImageChart.setOption(volumeSumImageoption);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getCommodityList() {
      let data = {
        dataFactoryId: this.from.dataFactoryId,
        beginTime: this.from.beginTime,
        endTime: this.from.endTime,
        page: this.from.page,
        limit: this.from.limit,
      };
      this.loading = true;
      indexCommodityList(data)
        .then((res) => {
          console.log("数据场列表统计", res);
          this.tableData.data = res.list;
          this.tableData.total = res.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    pageChange(page) {
      this.from.page = page;
      this.getCommodityList();
    },
    handleSizeChange(val) {
      this.from.limit = val;
      this.getCommodityList();
    },
  },
};
</script>

<style scoped lang="scss">
.btn_bt {
  border-top: 1px dashed #ccc;
  padding-top: 20px;
}

.list {
  .dashboard-console-grid {
    text-align: center;

    >>>.ivu-mb {
      width: 200px;
      padding-bottom: 20px;
    }

    .p1 {
      font-size: 16px;
      font-weight: 600;
    }

    .p2 {
      margin-top: 10px;
      font-size: 14px;
    }
  }
}
</style>
